import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getCollection, listCollections } from "@/lib/public/queries";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { ToolCard } from "@/components/tool-card";
import { fmtDate } from "@/lib/utils";
export const revalidate = 600;
export async function generateStaticParams() { try { return (await listCollections()).map((c) => ({ slug: c.slug })); } catch { return []; } }
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const c = await getCollection((await params).slug); if (!c) return { title: "Not found" };
  return { title: c.title, description: c.description.slice(0, 160), alternates: { canonical: `/collections/${c.slug}` } };
}
export default async function CollectionPage({ params }: { params: Promise<{ slug: string }> }) {
  const c = await getCollection((await params).slug); if (!c) notFound();
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <Breadcrumbs items={[{ href: "/collections", label: "Collections" }, { label: c.title }]} />
      <h1 className="display h1 mt-3">{c.title}</h1>
      <p className="prose-tool mt-3 max-w-3xl">{c.description}</p>
      <p className="mt-2 text-xs text-fg-3">{c.items.length} tools · updated {fmtDate(c.updatedAt)} · <Link href={`/compare?tools=${c.items.slice(0, 4).map((i) => i.slug).join(",")}`} rel="nofollow" className="text-accent hover:underline">compare the first four</Link></p>
      <h2 className="sr-only">Tools in this collection</h2>
      <ol className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">{c.items.map((t, i) => <li key={t.id} className="relative"><span className="absolute -left-1 -top-2 z-10 grid h-6 w-6 place-items-center rounded-full bg-accent text-xs font-semibold text-accent-fg" aria-hidden>{i + 1}</span><ToolCard t={t} blurb={t.blurb} className="h-full" /></li>)}</ol>
    </div>
  );
}